<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../../common/vue2/vue.js"></script>
    <script src="../../common/vuex3.js"></script>
  </head>
  <body>
    <div id="app">
      <h2 v-once>{{msg}}</h2>
      <h3 v-html="url"></h3>
      <p>{{a}}</p>
    </div>

    <script type="text/javascript">
      import {createStore} from 'vuex'
      var data = {
        msg: "hello,Vue",
        a: 3,
        url: '<a href="#">hahaha</a>',
      };

      // 创建一个 Counter 组件
      const Counter = {
        template: `<div>{{ count }}</div>`,
        computed: {
          count() {
            return this.$store.state.count;
          },
        },
      };

      const store = createStore({
        state() {
          return {
            count: 0,
          };
        },
        mutations: {
          increment(state) {
            state.count++;
          },
        },
      });

      // Object.freeze(data)
      var vm = new Vue({
        el: "#app",
        data() {
          return data;
        },
        beforeCreate() {},
        created() {
          console.log("created,a:", this.a);
        },
        beforeMount() {},
        mounted() {},
        beforeUpdate() {},
        updated() {},
        beforeDestroy() {},
        destroyed() {},
      });

 
    </script>
  </body>
</html>
